<template>
  <view class="product-document-detail">
    <!-- 顶部导航 -->
    <u-navbar title="产品资料详情" :border="false" :autoBack="true" :bgColor="'#fff'">
      <view class="navbar-right" slot="right" v-if="isLoggedIn">
        <text class="customer-name" v-if="customerName">{{ customerName }}</text>
      </view>
    </u-navbar>
    
    <!-- 加载状态 -->
    <u-loading-page :loading="loading" loading-text="加载中..."></u-loading-page>
    
          <!-- 未登录状态页面 -->
      <view class="login-required" v-if="!loading && !isLoggedIn">
              <view class="login-prompt">
        <view class="prompt-icon">👤</view>
        <text class="prompt-title">客户登录</text>
        <text class="prompt-desc">请输入客户密码查看产品资料详情</text>
        
        <view class="password-form">
          <input 
            class="password-input" 
            v-model="password" 
            placeholder="请输入客户密码" 
            type="password"
            @confirm="handleLogin"
          />
          <view class="confirm-btn" @click="handleLogin" :class="{ loading: loginLoading }">
            <u-loading :show="loginLoading" color="#ffffff" size="18"></u-loading>
            <text v-if="!loginLoading">登录</text>
            <text v-else>登录中...</text>
          </view>
        </view>
      </view>
      </view>
    
    <view class="content-wrapper" v-if="!loading && productDocument && isLoggedIn">
            <!-- 顶部产品图片和视频轮播 -->
      <view class="main-swiper-container">
        <swiper class="main-swiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#fff" @change="onSwiperChange">
        
          
          <!-- 产品图片 -->
          <swiper-item v-for="(image, index) in productImages" :key="'img-' + index">
            <view class="swiper-item-container">
              <image :src="image" mode="aspectFill" class="main-swiper-image" @click="previewImage(image)" @error="handleImageError" ></image>
            </view>
          </swiper-item>
        
          
                      <!-- 产品视频 -->
          <swiper-item v-for="(video, index) in productVideos" :key="'video-' + index">
            <view class="swiper-item-container video-container">
              <video :src="video" controls class="main-swiper-video" poster="/static/video-poster.png" @error="handleVideoError"></video>
            </view>
          </swiper-item>
          
          <!-- 默认占位图 -->
          <swiper-item v-if="totalMediaCount === 0">
            <view class="swiper-item-container placeholder-container">
              <view class="placeholder-content">
                <text class="placeholder-icon">📷</text>
                <text class="placeholder-text">暂无图片</text>
              </view>
            </view>
          </swiper-item>
        </swiper>
      
        
        <!-- 轮播图指示器计数 -->
        <view class="swiper-counter" v-if="totalMediaCount > 0">
          <text>{{ currentSwiperIndex + 1 }}/{{ totalMediaCount }}</text>
        </view>
        

    </view>
    
      <!-- 产品标题区域 -->
      <view class="product-header">
        <view class="product-title">{{ productDocument.title || '产品资料' }}</view>
        <view class="product-description" v-if="productDocument.description">{{ productDocument.description }}</view>
        <view class="product-meta">
          <view class="meta-item">
            <text class="meta-label">产品编码</text>
            <text class="meta-value">{{ productDocument.productCode || '-' }}</text>
          </view>
          <view class="meta-item" v-if="productDocument.deviceManufacturer">
            <text class="meta-label">设备厂家</text>
            <text class="meta-value">{{ productDocument.deviceManufacturer }}</text>
          </view>
        </view>
      </view>
      
      <!-- 自助服务模块 -->
      <view class="service-section">
        <view class="section-title">
          <text class="title-icon">🛠</text>
          <text class="title-text">自助服务</text>
        </view>
        <view class="service-grid">
          <view class="service-item" @click="handleService('repair')">
            <view class="service-icon repair">
              <text class="icon">🔧</text>
            </view>
            <text class="service-name">维修服务</text>
          </view>
          <view class="service-item" @click="handleService('onsite')">
            <view class="service-icon onsite">
              <text class="icon">🏠</text>
            </view>
            <text class="service-name">上门服务</text>
          </view>
          <view class="service-item" @click="handleService('report')">
            <view class="service-icon report">
              <text class="icon">📋</text>
            </view>
            <text class="service-name">故障报修</text>
          </view>
          <view class="service-item" @click="handleService('more')">
            <view class="service-icon more">
              <text class="icon">⚡</text>
            </view>
            <text class="service-name">更多</text>
          </view>
        </view>
      </view>
      
      <!-- 整合Tab容器 -->
      <view class="integrated-tab-container">
        <!-- Tab导航栏 -->
        <view class="tab-nav">
          <view 
            class="tab-item" 
            :class="{ active: currentSegment === 0 }"
            @click="onSegmentChange(0)"
          >
            <text class="tab-title">产品资料</text>
          </view>
          <view 
            class="tab-item" 
            :class="{ active: currentSegment === 1 }"
            @click="onSegmentChange(1)"
          >
            <text class="tab-title">定制项</text>
          </view>
          <view 
            class="tab-item" 
            :class="{ active: currentSegment === 2 }"
            @click="onSegmentChange(2)"
          >
            <text class="tab-title">产品详情</text>
          </view>
          <view 
            class="tab-item" 
            :class="{ active: currentSegment === 3 }"
            @click="onSegmentChange(3)"
          >
            <text class="tab-title">服务记录</text>
          </view>
        </view>

        <!-- Tab内容区域 -->
        <view class="tab-content-container">
                 <!-- 产品资料信息 -->
         <view class="content-panel" v-show="currentSegment === 0">
           <view class="info-card elegant">
             <view class="card-content">
               <view class="info-row">
                 <text class="info-label">客户名称</text>
                 <text class="info-value highlight">{{ productDocument.customerName || '-' }}</text>
               </view>
             </view>
           </view>

          <!-- 质保信息 -->
          <view class="info-card elegant">
            <view class="card-header-simple">
              <text class="card-title-simple">🛡️ 质保信息</text>
            </view>
            <view class="card-content">
              <view class="info-row">
                <text class="info-label">质保期</text>
                <text class="info-value">{{ productDocument.warranty ? productDocument.warranty + ' 个月' : '-' }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">质保开始</text>
                <text class="info-value">{{ productDocument.warrantyStartTime ? formatToDate(productDocument.warrantyStartTime) : '-' }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">质保截止</text>
                <text class="info-value">{{ productDocument.warrantyEndTime ? formatToDate(productDocument.warrantyEndTime) : '-' }}</text>
              </view>
            </view>
          </view>

          <!-- 产品文档 -->
          <view class="info-card elegant" v-if="productDocumentFiles.length > 0">
            <view class="card-header-simple">
              <text class="card-title-simple">📄 产品文档</text>
              <text class="document-count">{{ productDocumentFiles.length }}</text>
            </view>
            <view class="card-content">
              <view class="document-elegant-list">
                <view 
                  v-for="(doc, index) in productDocumentFiles" 
                  :key="index"
                  class="document-elegant-item"
                  @click="previewDocument(doc)"
                >
                  <view class="document-elegant-icon">
                    <text class="icon">📋</text>
                  </view>
                  <view class="document-elegant-info">
                    <text class="document-name">{{ doc.name }}</text>
                    <text class="document-hint">轻触下载</text>
                  </view>
                  <u-icon name="download" color="#2979ff" size="18"></u-icon>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 定制项信息 -->
        <view class="content-panel" v-show="currentSegment === 1">
          <view v-if="productDocument.customizationItems && productDocument.customizationItems.length > 0">
            <view v-for="(item, index) in productDocument.customizationItems" :key="item.id || index" class="customization-elegant-card">
              <view class="customization-header-elegant">
                <text class="customization-number">#{{ index + 1 }}</text>
                <text class="customization-title-elegant">{{ item.content || '定制项目' }}</text>
              </view>
              
              <view class="customization-content" v-if="item.description">
                <text class="customization-description">{{ item.description }}</text>
              </view>

              <!-- 物料明细 -->
              <view class="material-section" v-if="item.materials && item.materials.length > 0">
                <view class="material-header">
                  <text class="material-title">关联物料</text>
                  <text class="material-count">{{ item.materials.length }} 项</text>
                </view>
                
                <view class="material-elegant-list">
                  <view 
                    v-for="(material, materialIndex) in item.materials" 
                    :key="material.id || material.materialId || materialIndex"
                    class="material-elegant-item"
                  >
                    <view class="material-elegant-image">
                      <image 
                        v-if="material.material?.image"
                        :src="getImageUrl(material.material.image)"
                        class="material-img"
                        mode="aspectFill"
                      />
                      <view v-else class="material-placeholder">
                        <text class="placeholder-icon">📦</text>
                      </view>
                    </view>
                    
                    <view class="material-elegant-info">
                      <view class="material-elegant-header">
                        <text class="material-code">{{ material.material?.materialCode || '-' }}</text>
                        <u-tag v-if="material.material?.isVulnerable" text="易损" type="error" size="mini"></u-tag>
                      </view>
                      <text class="material-name">{{ material.material?.materialName || '-' }}</text>
                      <view class="material-specs">
                        <text v-if="material.material?.specifications" class="spec-text">
                          规格：{{ material.material.specifications }}
                        </text>
                        <text class="quantity-text">
                          数量：{{ material.quantity || 0 }} {{ material.material?.unit || '个' }}
                        </text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-else class="empty-state">
            <u-empty text="暂无定制项信息" mode="data" icon="/static/empty-custom.png"></u-empty>
          </view>
        </view>

        <!-- 产品详情信息 -->
        <view class="content-panel" v-show="currentSegment === 2">
          <view v-if="productInfo">
            <!-- 基本信息 -->
            <view class="info-card elegant">
              <view class="card-header-simple">
                <text class="card-title-simple">📋 基本信息</text>
              </view>
              <view class="card-content">
                <view class="info-row">
                  <text class="info-label">产品名称</text>
                  <text class="info-value primary">{{ productInfo.name || '-' }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">产品型号</text>
                  <text class="info-value">{{ productInfo.model || '-' }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">品牌</text>
                  <text class="info-value">{{ productInfo.brand || '-' }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">产地</text>
                  <text class="info-value">{{ productInfo.origin || '-' }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">分类</text>
                  <text class="info-value">{{ productInfo.categoryName || '-' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 规格参数 -->
            <view class="info-card elegant">
              <view class="card-header-simple">
                <text class="card-title-simple">⚙️ 规格参数</text>
      </view>
              <view class="card-content">
                <view class="info-row" v-if="productInfo.texture">
                  <text class="info-label">材质</text>
                  <text class="info-value">{{ productInfo.texture }}</text>
        </view>
                <view class="info-row" v-if="productInfo.power">
                  <text class="info-label">功率</text>
                  <text class="info-value">{{ productInfo.power }} kW</text>
        </view>
                <view class="info-row" v-if="productInfo.dimensions">
                  <text class="info-label">尺寸</text>
                  <text class="info-value">{{ productInfo.dimensions }}</text>
        </view>
                <view class="info-row" v-if="productInfo.weight">
                  <text class="info-label">重量</text>
                  <text class="info-value">{{ productInfo.weight }} kg</text>
        </view>
                <view class="info-row" v-if="productInfo.warranty">
                  <text class="info-label">保修期</text>
                  <text class="info-value">{{ productInfo.warranty }} 个月</text>
        </view>
        </view>
        </view>

            <!-- 详细描述 -->
            <view class="info-card elegant" v-if="productInfo.scaleDescription || productInfo.technicalParams || productInfo.usageScenarios">
              <view class="card-header-simple">
                <text class="card-title-simple">📝 详细描述</text>
              </view>
              <view class="card-content">
                <view class="description-simple-container">
                  <!-- 规格说明 -->
                  <view class="description-item" v-if="productInfo.scaleDescription">
                    <text class="desc-title">规格说明</text>
                    <text class="desc-text">{{ productInfo.scaleDescription }}</text>
                  </view>
                  
                  <!-- 技术参数 -->
                  <view class="description-item" v-if="productInfo.technicalParams">
                    <text class="desc-title">技术参数</text>
                    <text class="desc-text">{{ productInfo.technicalParams }}</text>
                  </view>
                  
                  <!-- 适用场景 -->
                  <view class="description-item" v-if="productInfo.usageScenarios">
                    <text class="desc-title">适用场景</text>
                    <text class="desc-text">{{ productInfo.usageScenarios }}</text>
                  </view>
                </view>
              </view>
            </view>
    
            <!-- 关联物料 -->
            <view class="info-card elegant" v-if="productInfo.materials && productInfo.materials.length > 0">
              <view class="card-header-simple">
                <text class="card-title-simple">🔧 关联物料</text>
                <text class="document-count">{{ productInfo.materials.length }}</text>
      </view>
              <view class="card-content">
                <view class="material-elegant-grid">
                  <view 
                    v-for="material in productInfo.materials" 
                    :key="material.materialId"
                    class="material-grid-item"
                  >
                    <view class="material-grid-image">
                      <image v-if="material.material.image" :src="getImageUrl(material.material.image)" class="grid-img" mode="aspectFill"></image>
                      <view v-else class="grid-placeholder">
                        <text class="grid-icon">📦</text>
        </view>
        </view>
                    <view class="material-grid-info">
                      <text class="grid-code">{{ material.material.materialCode || '-' }}</text>
                      <text class="grid-name">{{ material.material.materialName || '-' }}</text>
                      <text class="grid-quantity">{{ material.quantity || 0 }}{{ material.material.unit || '个' }}</text>
        </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-else class="empty-state">
            <u-empty text="暂无产品详情信息" mode="data"></u-empty>
      </view>
    </view>
    
        <!-- 服务记录信息 -->
        <view class="content-panel" v-show="currentSegment === 3">
          <view v-if="serviceRecords.length > 0">
            <view v-for="record in serviceRecords" :key="record.id" class="service-record-card">
              <view class="service-record-header">
                <view class="service-type-badge" :class="getServiceTypeClass(record.type)">
                  <text class="type-icon">{{ getServiceTypeIcon(record.type) }}</text>
                  <text class="type-text">{{ getServiceTypeText(record.type) }}</text>
      </view>
                <view class="service-status-badge" :class="getServiceStatusClass(record.status)">
                  {{ getServiceStatusText(record.status) }}
          </view>
          </view>
              
              <view class="service-record-content">
                <text class="service-title">{{ record.title }}</text>
                <text class="service-description">{{ record.description }}</text>
                
                <view class="service-info-grid">
                  <view class="service-info-item">
                    <text class="info-label">创建时间</text>
                    <text class="info-value">{{ record.createTime }}</text>
          </view>
                  <view class="service-info-item" v-if="record.completeTime">
                    <text class="info-label">完成时间</text>
                    <text class="info-value">{{ record.completeTime }}</text>
        </view>
                  <view class="service-info-item">
                    <text class="info-label">负责工程师</text>
                    <text class="info-value engineer">{{ record.engineer }}</text>
                  </view>
                  <view class="service-info-item">
                    <text class="info-label">联系电话</text>
                    <text class="info-value phone" @click="callEngineer(record.phone)">{{ record.phone }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-else class="empty-state">
            <u-empty text="暂无服务记录" mode="data"></u-empty>
          </view>
        </view>
        </view>
      </view>
        </view>
    
    <!-- 悬浮操作按钮组 -->
    <view class="floating-actions" v-if="!loading && productDocument && isLoggedIn">
      <!-- 咨询按钮 -->
      <view class="floating-btn floating-consult" @click="makeCall">
        <image src="/static/kf.png" mode="widthFix" class="btn-icon"></image>
      </view>
      
      <!-- 退出按钮 -->
      <view class="floating-btn floating-logout" @click="logout">
        <text class="btn-icon">→</text>
      </view>
    </view>

  </view>
</template>

<script>
import { crmApi as crmApi } from "../../utils/api";
import helper from "../../utils/helper";

export default {
  data() {
    return {
      documentNumber: null,
      loading: false,
      productDocument: null,
      productInfo: null,
      productImages: [],
      productVideos: [],
      productDocumentFiles: [],
      isFavorite: false,
      currentSwiperIndex: 0,
      // 登录相关状态
      isLoggedIn: false,
      password: '',
      loginLoading: false,
      // Segment配置
      currentSegment: 0,
      segmentList: [
        { name: '产品资料' },
        { name: '定制项' },
        { name: '产品详情' },
        { name: '服务记录' }
      ],
      // 服务记录数据
      serviceRecords: [
        {
          id: '1',
          type: 'maintenance',
          title: '设备维护保养',
          description: '对产品进行定期维护保养，更换易损件',
          status: 'completed',
          createTime: '2024-01-15 09:30:00',
          completeTime: '2024-01-15 16:20:00',
          engineer: '张师傅',
          phone: '13800138001'
        },
        {
          id: '2',
          type: 'repair',
          title: '故障检修',
          description: '设备出现异常响声，需要检查电机部件',
          status: 'processing',
          createTime: '2024-01-10 14:25:00',
          engineer: '李工程师',
          phone: '13800138002'
        },
        {
          id: '3',
          type: 'install',
          title: '设备安装调试',
          description: '新设备安装调试及参数配置',
          status: 'pending',
          createTime: '2024-01-08 10:15:00',
          engineer: '王师傅',
          phone: '13800138003'
        }
      ]
    }
  },
  computed: {
    // 当前登录客户名称
    customerName() {
      const userInfo = uni.getStorageSync('userInfo');
      return userInfo ? (userInfo.customerName || userInfo.customerId) : '';
    },
    // 媒体总数
    totalMediaCount() {
      let count = 0;
      if (this.productInfo && this.productInfo.image) count++;
      count += this.productImages.length;
      count += this.productVideos.length;
      

      
      return count;
    },
    // 定制项数量
    customizationCount() {
      return (this.productDocument?.customizationItems?.length) || 0;
    },
    // 物料数量
    materialCount() {
      return (this.productInfo?.materials?.length) || 0;
    },
    // 服务记录数量
    serviceRecordCount() {
      return this.serviceRecords.length;
    },
    // 是否有任何媒体资源
    hasAnyMedia() {
      return (this.productInfo && this.productInfo.image) || 
             this.productImages.length > 0 || 
             this.productVideos.length > 0;
    }
  },
  onLoad(option) {
	  //this.documentNumber='1212'
    if (option.scene) {
      this.documentNumber = option.scene;
    }
    
    // 检查登录状态
    this.checkLoginStatus();
  },
  methods: {
    // 检查客户登录状态
    checkLoginStatus() {
      try {
        // 检查本地存储的token和客户信息
        const token = uni.getStorageSync('token');
        const userInfo = uni.getStorageSync('userInfo');
        
        // 验证token和客户信息的有效性
        if (token && userInfo && userInfo.customerId) {
          // 检查token是否过期（可选）
          const loginTime = new Date(userInfo.loginTime);
          const now = new Date();
          const hoursPassed = (now - loginTime) / (1000 * 60 * 60);
          
          // 如果登录时间超过24小时，则需要重新登录
          if (hoursPassed > 24) {
            this.clearLoginData();
            this.isLoggedIn = false;
            this.loading = false;
            uni.showToast({
              title: '登录已过期，请重新登录',
              icon: 'none'
            });
            return;
          }
          
          console.log('客户已登录:', userInfo.customerName || userInfo.customerId);
          this.isLoggedIn = true;
          this.fetchProductDocumentDetail();
        } else {
          this.isLoggedIn = false;
          this.loading = false;
        }
      } catch (error) {
        console.error('检查登录状态失败:', error);
        this.clearLoginData();
        this.isLoggedIn = false;
        this.loading = false;
      }
    },
    
    // 客户登录
    async handleLogin() {
      if (!this.password) {
        uni.showToast({
          title: '请输入客户密码',
          icon: 'none'
        });
        return;
      }
      
      this.loginLoading = true;
      
      try {
        // 调用客户登录接口
        const loginResult = await this.customerLogin();
        
        if (loginResult.success) {
          // 登录成功后保存信息
          uni.setStorageSync('token', loginResult.data.token || 'customer-token-' + Date.now());
          uni.setStorageSync('userInfo', {
            customerId: loginResult.data.customerId,
            customerName: loginResult.data.customerName,
            loginTime: new Date().toISOString(),
            ...loginResult.data
          });
          
          this.isLoggedIn = true;
          
          // 登录成功后获取产品数据
          this.fetchProductDocumentDetail();
          
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
          
          // 清空密码
          this.password = '';
          
        } else {
          throw new Error(loginResult.message || '登录失败');
        }
        
      } catch (error) {
        console.error('客户登录失败:', error);
        uni.showToast({
          title: error.message || '密码错误，请重试',
          icon: 'none'
        });
        
        // 清空密码让用户重新输入
        this.password = '';
      } finally {
        this.loginLoading = false;
      }
    },
    
    // 客户登录API调用
    async customerLogin() {
      try {
        // 调用微信服务的客户登录接口
        const response = await crmApi.customerLogin({
          password: this.password,
          documentcode: this.documentNumber, // 传递产品资料ID用于权限验证
          loginType: 'password' // 登录类型：密码登录
        });
        
        // 统一处理API响应格式
        if (response.code === 200 || response.code === 0) {
          return {
            success: true,
            data: response.data || response,
            message: response.message || '登录成功'
          };
        } else {
          return {
            success: false,
            message: response.message || response.msg || '登录失败'
          };
        }
        
      } catch (error) {
        console.error('CustomerLogin API调用失败:', error);
        
        // 处理网络错误或其他异常
        return {
          success: false,
          message: error.message || '网络异常，请检查网络连接'
        };
      }
    },
    

    // 清理登录数据
    clearLoginData() {
      uni.removeStorageSync('token');
      uni.removeStorageSync('userInfo');
      this.productDocument = null;
      this.productInfo = null;
      this.productImages = [];
      this.productVideos = [];
      this.productDocumentFiles = [];
      this.password = '';
    },
    
    // 客户退出登录
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出当前客户登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.clearLoginData();
            this.isLoggedIn = false;
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            });
          }
        }
      });
    },
    
        // 获取产品资料详情
    async fetchProductDocumentDetail() {
      if (!this.documentNumber) {
        uni.showToast({
          title: '产品资料ID缺失',
          icon: 'none'
        });
        return;
      }
      
      this.loading = true;
      uni.showLoading({
        title: '加载中'
      });
      
      try {
        const result = await crmApi.getproductdocumentinfo(this.documentNumber);
        
        if (result.code === 200 || result.code === 0) {
          this.productDocument = result.data || result;
          
          // 加载产品详细信息
          if (this.productDocument.productId) {
            try {
              const productDetail = await crmApi.getproductinfo(this.productDocument.productId);
              if (productDetail.code === 200 || productDetail.code === 0) {
                this.productInfo = productDetail.data || productDetail;
                this.parseMediaFiles();
              }
            } catch (error) {
              console.error('获取产品详情失败:', error);
              uni.showToast({
                title: '获取产品详情失败',
                icon: 'none'
              });
            }
          }
        } else if (result.code === 401 || result.code === 403) {
          // 权限不足，需要重新登录
          this.clearLoginData();
          this.isLoggedIn = false;
          uni.showToast({
            title: '登录已失效，请重新登录',
            icon: 'none'
          });
        } else {
          uni.showToast({
            title: result.message || result.msg || '获取产品资料详情失败',
            icon: 'none'
          });
        }
      } catch (err) {
        console.error('获取产品资料详情失败:', err);
        
        // 检查是否是认证错误
        if (err.statusCode === 401 || err.statusCode === 403) {
          this.clearLoginData();
          this.isLoggedIn = false;
          uni.showToast({
            title: '登录已失效，请重新登录',
            icon: 'none'
          });
        } else {
          uni.showToast({
            title: '网络异常，请稍后重试',
            icon: 'none'
          });
        }
      } finally {
        this.loading = false;
        uni.hideLoading();
      }
    },
    
             // 解析媒体文件
    parseMediaFiles() {
      if (!this.productInfo) return;
      
      // 解析产品图片
      if (this.productInfo.productImages) {
        try {
          if (typeof this.productInfo.productImages === 'string') {
            const images = this.productInfo.productImages.split(',').filter(Boolean);
            this.productImages = images.map(img => this.getImageUrl(img.trim()));
          } else if (Array.isArray(this.productInfo.productImages)) {
            this.productImages = this.productInfo.productImages.map(img => this.getImageUrl(img));
          }
        } catch (e) {
          console.error('解析产品图片失败:', e);
        }
      }
       
       // 解析产品视频
      if (this.productInfo.productVideos) {
        try {
          if (typeof this.productInfo.productVideos === 'string') {
            const videos = this.productInfo.productVideos.split(',').filter(Boolean);
            this.productVideos = videos.map(video => this.getImageUrl(video.trim()));
          } else if (Array.isArray(this.productInfo.productVideos)) {
            this.productVideos = this.productInfo.productVideos.map(video => this.getImageUrl(video));
           }
         } catch (e) {
           console.error('解析产品视频失败:', e);
         }
       }
       
       // 解析产品文档
      if (this.productInfo.productDocumentFiles && Array.isArray(this.productInfo.productDocumentFiles)) {
        this.productDocumentFiles = this.productInfo.productDocumentFiles.map(doc => ({
               ...doc,
          url: this.getImageUrl(doc.md5)
             }));
       }
     },
    
         // 获取文件URL
    getImageUrl(md5) {
       if (!md5) return '/static/default-product.png';
       // 如果已经是完整URL，直接返回
       if (md5.startsWith('http')) return md5;
       // 构建文件下载URL
      return helper.toApiUrl(`file/download2?md5=${md5}`)
    },

    // 格式化时间
    formatToDateTime(dateString) {
      if (!dateString) return '-';
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN');
    },

    // 格式化日期（只显示日期部分）
    formatToDate(dateString) {
      if (!dateString) return '-';
      return dateString.split('T')[0];
    },

    // Segment切换
    onSegmentChange(index) {
      this.currentSegment = index;
    },

    // 自助服务处理
    handleService(type) {
      const serviceMap = {
        repair: '维修服务',
        onsite: '上门服务', 
        report: '故障报修',
        more: '更多服务'
      };
      
      uni.showToast({
        title: `${serviceMap[type]}功能开发中`,
        icon: 'none'
      });
    },

    // 轮播图切换事件
    onSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    },

    // 预览主图
    previewMainImage() {
      if (this.productInfo && this.productInfo.image) {
        const allImages = [this.getImageUrl(this.productInfo.image), ...this.productImages];
        uni.previewImage({
          current: this.getImageUrl(this.productInfo.image),
          urls: allImages
        });
      }
     },
    
    // 预览图片
    previewImage(current) {
      const allImages = [];
      if (this.productInfo && this.productInfo.image) {
        allImages.push(this.getImageUrl(this.productInfo.image));
      }
      allImages.push(...this.productImages);
      
      uni.previewImage({
        current: current,
        urls: allImages
      });
    },
    
    // 预览文档
    previewDocument(doc) {
      uni.downloadFile({
        url: doc.url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.openDocument({
              filePath: res.tempFilePath,
              success: () => {
                console.log('打开文档成功');
              }
            });
          }
        }
      });
    },

    // 视频错误处理
    handleVideoError(event) {
      console.error('视频加载失败:', event);
      uni.showToast({
        title: '视频加载失败',
        icon: 'none'
      });
    },

    // 图片错误处理
    handleImageError(event) {
      console.error('图片加载失败:', event);
    },
    
    // 切换收藏状态
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
      uni.showToast({
        title: this.isFavorite ? '已收藏' : '已取消收藏',
        icon: 'none'
      });
    },
    
    // 分享产品
    shareProduct() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "",
        title: this.productDocument?.title || '产品资料',
        summary: this.productDocument?.description || '',
        imageUrl: this.productImages[0] || '/static/default-product.png',
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 咨询客服
    contactService() {
      uni.showToast({
        title: '正在连接客服...',
        icon: 'none'
      });
    },
    
    // 拨打电话
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: '18616818009'
      });
    },
    
    // 立即询价
    inquirePrice() {
      uni.navigateTo({
        url: `/pages/inquiry/index?productdocumentNumber=${this.documentNumber}`
      });
    },

    // 服务记录相关方法
    getServiceTypeIcon(type) {
      const typeMap = {
        maintenance: '🔧',
        repair: '🛠️',
        install: '⚙️',
        inspection: '🔍'
      };
      return typeMap[type] || '📋';
    },

    getServiceTypeText(type) {
      const typeMap = {
        maintenance: '维护保养',
        repair: '故障检修',
        install: '安装调试',
        inspection: '检查巡检'
      };
      return typeMap[type] || '其他服务';
    },

    getServiceTypeClass(type) {
      return `service-type-${type}`;
    },

    getServiceStatusText(status) {
      const statusMap = {
        pending: '待处理',
        processing: '处理中',
        completed: '已完成',
        cancelled: '已取消'
      };
      return statusMap[status] || '未知状态';
    },

    getServiceStatusClass(status) {
      return `service-status-${status}`;
    },

    // 拨打工程师电话
    callEngineer(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.product-document-detail {
  background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
  min-height: 100vh;
  padding-bottom: 140rpx;
}

.content-wrapper {
  padding-bottom: 20rpx;
}

// 主轮播图区域
.main-swiper-container {
  position: relative;
  height: 560rpx;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 0 0 32rpx 32rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
  
  .main-swiper {
    width: 100%;
    height: 100%;
    
    .swiper-item-container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40rpx;
      box-sizing: border-box;
      
      &.video-container {
        padding: 20rpx;
      }
    }
    
        .main-swiper-image {
      max-width: 100%;
      max-height: 100%;
      min-width: 200rpx;
      min-height: 200rpx;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.12);
      }
    }
    
    .main-swiper-video {
      max-width: 100%;
      max-height: 100%;
   
      border-radius: 16rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
      background: #000;
    }
    
    .placeholder-container {
      .placeholder-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 16rpx;
        padding: 60rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
        border: 1px solid #e2e8f0;
        
        .placeholder-icon {
          font-size: 80rpx;
          margin-bottom: 20rpx;
          opacity: 0.4;
          color: #94a3b8;
        }
        
        .placeholder-text {
          font-size: 28rpx;
          color: #64748b;
          font-weight: 500;
        }
      }
    }
  }
  
  .action-buttons {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    
    .action-btn {
      width: 72rpx;
      height: 72rpx;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10rpx);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.92);
        background: rgba(0, 0, 0, 0.6);
      }
    }
  }
  
  .swiper-counter {
    position: absolute;
    bottom: 24rpx;
    right: 24rpx;
    background: rgba(255, 255, 255, 0.95);
    color: #334155;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    font-weight: 600;
    backdrop-filter: blur(10rpx);
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
  }
}

// 产品标题区域
.product-header {
  background: #ffffff;
  margin: 24rpx 24rpx 0;
  padding: 36rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.08);
  
  .product-title {
    font-size: 34rpx;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 16rpx;
  }
  
  .product-description {
    font-size: 26rpx;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 28rpx;
  }
  
  .product-meta {
    display: flex;
    gap: 32rpx;
    
    .meta-item {
      flex: 1;
      
      .meta-label {
        display: block;
        font-size: 22rpx;
        color: #94a3b8;
        margin-bottom: 8rpx;
        font-weight: 500;
      }
      
      .meta-value {
        font-size: 26rpx;
        color: #1e293b;
        font-weight: 600;
        font-family: 'SF Pro Display', system-ui;
      }
    }
  }
}

// 整合Tab容器
.integrated-tab-container {
  background: #ffffff;
  margin: 24rpx;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(30, 41, 59, 0.08);
  overflow: hidden;
  
  .tab-nav {
    display: flex;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    
    .tab-item {
      flex: 1;
      padding: 32rpx 16rpx;
      text-align: center;
      position: relative;
      transition: all 0.3s ease;
      cursor: pointer;
      
      &.active {
        background: rgba(255, 255, 255, 0.1);
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 3rpx;
          background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
        }
        
        .tab-title {
          color: #ffffff;
          font-weight: 600;
        }
      }
      
      &:active {
        background: rgba(255, 255, 255, 0.05);
        transform: translateY(1rpx);
      }
      
      .tab-title {
        font-size: 28rpx;
        color: #94a3b8;
        font-weight: 500;
        transition: all 0.3s ease;
        line-height: 1.2;
      }
    }
  }
  
  .tab-content-container {
    padding: 40rpx 32rpx;
    background: #fafbfc;
    min-height: 500rpx;
    
    .content-panel {
      min-height: 400rpx;
    }
  }
}

// 自助服务模块
.service-section {
  background: #ffffff;
  margin: 24rpx 24rpx 0;
  padding: 36rpx;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.08);
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;
    
    .title-icon {
      font-size: 32rpx;
      margin-right: 12rpx;
    }
    
    .title-text {
      font-size: 32rpx;
      font-weight: 700;
      color: #1e293b;
    }
  }
  
  .service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24rpx;
    
    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24rpx 16rpx;
      border-radius: 20rpx;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
      
      &:active {
        transform: translateY(-2rpx);
        background: #f1f5f9;
        border-color: #cbd5e1;
      }
      
      .service-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;
        
        .icon {
          font-size: 36rpx;
        }
        
        &.repair {
          background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
          .icon { color: #ffffff; }
        }
        
        &.onsite {
          background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
          .icon { color: #ffffff; }
        }
        
        &.report {
          background: linear-gradient(135deg, #374151 0%, #6b7280 100%);
          .icon { color: #ffffff; }
        }
        
        &.more {
          background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
          .icon { color: #374151; }
        }
      }
      
      .service-name {
        font-size: 24rpx;
        color: #64748b;
        font-weight: 500;
      }
    }
  }
}



// 优雅信息卡片
.info-card.elegant {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.06);
  
  .card-header-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28rpx 28rpx 0;
    
    .card-title-simple {
      font-size: 28rpx;
      font-weight: 600;
      color: #0f172a;
    }
    
    .document-count {
      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
      color: #ffffff;
      font-size: 20rpx;
      padding: 6rpx 12rpx;
      border-radius: 12rpx;
      font-weight: 600;
    }
  }
  
  .card-content {
    padding: 28rpx;
  }
  
  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18rpx 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 26rpx;
      color: #64748b;
      font-weight: 500;
    }
    
    .info-value {
      font-size: 26rpx;
      color: #0f172a;
      font-weight: 600;
      
      &.primary {
        color: #1e293b;
        font-size: 28rpx;
      }
      
      &.highlight {
        color: #1e40af;
        font-weight: 700;
      }
    }
  }
}

// 文档优雅列表
.document-elegant-list {
  .document-elegant-item {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s ease;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background: #f8f9fa;
      margin: 0 -32rpx;
      padding-left: 32rpx;
      padding-right: 32rpx;
    }
    
    .document-elegant-icon {
      width: 72rpx;
      height: 72rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;
      
      .icon {
        font-size: 32rpx;
        color: #fff;
      }
    }
    
    .document-elegant-info {
        flex: 1;
      
      .document-name {
        font-size: 28rpx;
        color: #1a1a1a;
        font-weight: 600;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .document-hint {
        font-size: 24rpx;
        color: #2979ff;
      }
    }
  }
}

// 定制项优雅卡片
.customization-elegant-card {
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  
  .customization-header-elegant {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    
    .customization-number {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      font-size: 20rpx;
      font-weight: 700;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      margin-right: 16rpx;
    }
    
    .customization-title-elegant {
      font-size: 30rpx;
      font-weight: 700;
      color: #1a1a1a;
    }
  }
  
  .customization-content {
    margin-bottom: 24rpx;
    
    .customization-description {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      background: #f8f9fa;
      padding: 20rpx;
      border-radius: 16rpx;
      word-wrap: break-word;
      word-break: break-all;
      white-space: pre-wrap;
      text-align: justify;
      display: block;
      width: 100%;
      box-sizing: border-box;
    }
  }
}

// 物料区域
.material-section {
  margin-top: 32rpx;
  
  .material-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  margin-bottom: 20rpx;
  
    .material-title {
      font-size: 28rpx;
      font-weight: 700;
      color: #1a1a1a;
    }
    
    .material-count {
      font-size: 24rpx;
      color: #2979ff;
      background: #e3f2fd;
      padding: 6rpx 12rpx;
      border-radius: 16rpx;
    }
  }
}

// 物料优雅列表
.material-elegant-list {
  .material-elegant-item {
    display: flex;
    background: #f8f9fa;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 16rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
    .material-elegant-image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-right: 20rpx;
      
      .material-img {
        width: 100%;
        height: 100%;
      }
      
      .material-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #e3f2fd, #bbdefb);
        display: flex;
        align-items: center;
        justify-content: center;
        
        .placeholder-icon {
          font-size: 36rpx;
          color: #2979ff;
        }
      }
    }
    
    .material-elegant-info {
      flex: 1;
      
      .material-elegant-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;
        
        .material-code {
          font-size: 20rpx;
          color: #2979ff;
          background: #e3f2fd;
          padding: 6rpx 12rpx;
          border-radius: 12rpx;
          font-weight: 600;
          font-family: 'SF Mono', monospace;
        }
      }
      
      .material-name {
        font-size: 26rpx;
        color: #1a1a1a;
        font-weight: 600;
        margin-bottom: 12rpx;
        line-height: 1.3;
      }
      
      .material-specs {
        display: flex;
        flex-direction: column;
        gap: 6rpx;
        
        .spec-text, .quantity-text {
          font-size: 22rpx;
        color: #666;
        }
        
        .quantity-text {
          color: #52c41a;
          font-weight: 600;
        }
      }
    }
  }
}

// 物料网格
.material-elegant-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  
  .material-grid-item {
    background: #f8f9fa;
    border-radius: 16rpx;
    padding: 20rpx;
    text-align: center;
    
    .material-grid-image {
      width: 80rpx;
      height: 80rpx;
      margin: 0 auto 16rpx;
      border-radius: 12rpx;
      overflow: hidden;
      
      .grid-img {
        width: 100%;
        height: 100%;
      }
      
      .grid-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #e3f2fd, #bbdefb);
        display: flex;
        align-items: center;
        justify-content: center;
        
        .grid-icon {
        font-size: 28rpx;
          color: #2979ff;
        }
      }
    }
    
    .material-grid-info {
      .grid-code {
        font-size: 18rpx;
        color: #2979ff;
        background: #e3f2fd;
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
        margin-bottom: 8rpx;
        display: inline-block;
      }
      
      .grid-name {
        font-size: 22rpx;
        color: #1a1a1a;
        font-weight: 600;
        margin-bottom: 6rpx;
        display: block;
        line-height: 1.3;
      }
      
      .grid-quantity {
        font-size: 20rpx;
        color: #52c41a;
        font-weight: 600;
      }
    }
  }
}

// 简洁描述容器
.description-simple-container {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.description-item {
  padding: 24rpx 0;
  border-bottom: 1px solid #f1f5f9;
  
  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .desc-title {
    display: block;
    font-size: 28rpx;
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 16rpx;
    line-height: 1.4;
  }
  
  .desc-text {
    display: block;
    font-size: 26rpx;
    color: #64748b;
    line-height: 1.8;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
    text-align: justify;
  }
}

// 空状态
.empty-state {
  padding: 80rpx 0;
  text-align: center;
}

// 服务记录卡片
.service-record-card {
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  
  .service-record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    
    .service-type-badge {
      display: flex;
      align-items: center;
      gap: 8rpx;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      
      .type-icon {
        font-size: 20rpx;
      }
      
      .type-text {
        font-size: 22rpx;
        font-weight: 600;
        color: #fff;
      }
      
      &.service-type-maintenance {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      &.service-type-repair {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      
      &.service-type-install {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      
      &.service-type-inspection {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }
    
    .service-status-badge {
      padding: 6rpx 16rpx;
      border-radius: 16rpx;
      font-size: 20rpx;
      font-weight: 600;
      
      &.service-status-pending {
        background: #fff3cd;
        color: #856404;
      }
      
      &.service-status-processing {
        background: #cce5ff;
        color: #004085;
      }
      
      &.service-status-completed {
        background: #d1edff;
        color: #155724;
      }
      
      &.service-status-cancelled {
        background: #f8d7da;
        color: #721c24;
      }
    }
  }
  
  .service-record-content {
    padding: 32rpx;
    
    .service-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 16rpx;
      display: block;
    }
    
    .service-description {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 24rpx;
      display: block;
    }
    
    .service-info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;
      
      .service-info-item {
        .info-label {
          font-size: 22rpx;
          color: #999;
          margin-bottom: 6rpx;
          display: block;
        }
        
        .info-value {
          font-size: 24rpx;
          color: #1a1a1a;
          font-weight: 600;
          display: block;
          
          &.engineer {
            color: #2979ff;
          }
          
          &.phone {
            color: #52c41a;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

// 悬浮操作按钮组 - 京东风格
.floating-actions {
  position: fixed;
  right: 30rpx;
  bottom: 160rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
  z-index: 999;
}

.floating-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  // 简洁的白色背景
  background: #ffffff;
  
  // 轻微边框
  border: 1rpx solid #f0f0f0;
  
  // 适度阴影 - 京东风格
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  
  // 简洁过渡
  transition: all 0.2s ease;
  
  // 按压反馈
  &:active {
    transform: scale(0.95);
    background: #f8f8f8;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.12);
  }
  
  // 图标样式
  .btn-icon {
    font-size: 36rpx;
    color: #666;
    line-height: 1;
  }
}



// 底部操作区
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  padding: 24rpx 32rpx;
  display: flex;
  gap: 24rpx;
  z-index: 100;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  
  .action-group {
    display: flex;
    gap: 16rpx;
  }
  
  .main-action {
    flex: 1;
    display: flex;
  }
}

// 响应式布局
@media (max-width: 750rpx) {
  .material-elegant-grid {
    grid-template-columns: 1fr;
  }
  
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;
    
    .service-item {
      padding: 20rpx 12rpx;
      
      .service-icon {
        width: 60rpx;
        height: 60rpx;
        
        .icon {
          font-size: 28rpx;
        }
      }
      
      .service-name {
        font-size: 22rpx;
      }
    }
  }
  
  .product-meta {
    flex-direction: column;
    gap: 16rpx;
  }
  
  .data-overview {
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;
    
    .overview-item {
      padding: 16rpx 0;
      
      .overview-number {
        font-size: 40rpx;
      }
      
      .overview-label {
        font-size: 20rpx;
      }
    }
  }
  
  .service-info-grid {
    grid-template-columns: 1fr !important;
    gap: 16rpx;
  }
}

// 顶部导航栏右侧
.navbar-right {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 0 16rpx;
  
  .customer-name {
    font-size: 24rpx;
    color: #1e293b;
    font-weight: 600;
    margin-right: 12rpx;
    max-width: 120rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// 未登录状态页面
.login-required {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  
  .login-prompt {
    text-align: center;
    padding: 80rpx 60rpx;
    background: #ffffff;
    border-radius: 24rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.08);
    
    .prompt-icon {
      font-size: 120rpx;
      margin-bottom: 32rpx;
      opacity: 0.8;
    }
    
    .prompt-title {
      display: block;
      font-size: 36rpx;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 16rpx;
      line-height: 1.4;
    }
    
    .prompt-desc {
      display: block;
      font-size: 28rpx;
      color: #64748b;
      margin-bottom: 48rpx;
      line-height: 1.6;
    }
    
    .password-form {
      width: 100%;
      
      .password-input {
        
        padding: 24rpx 20rpx;
        border: 2rpx solid #e2e8f0;
        border-radius: 12rpx;
        font-size: 28rpx;
        color: #0f172a;
        background: #f8fafc;
        transition: all 0.3s ease;
        margin-bottom: 24rpx;
        
        &:focus {
          border-color: #3b82f6;
          background: #ffffff;
          box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.1);
        }
        
        &::placeholder {
          color: #94a3b8;
        }
      }
      
      .confirm-btn {
        
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        color: #ffffff;
        padding: 28rpx;
        border-radius: 16rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 6rpx 24rpx rgba(15, 23, 42, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12rpx;
        
        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 3rpx 12rpx rgba(15, 23, 42, 0.35);
        }
        
        &.loading {
          opacity: 0.8;
          pointer-events: none;
        }
      }
    }
  }
}


</style>
